<script setup lang="ts">
const { isFullscreen, toggle } = useFullscreen()
</script>

<template>
  <div class="full-screen press-down" :title="isFullscreen ? '退出全屏' : '全屏'" @click="toggle">
    <i
      class="esayIcon"
      :class="[isFullscreen ? 'esayIcon-tuichuquanping' : 'esayIcon-quanping']"
    ></i>
  </div>
</template>

<style scoped lang="scss">
.full-screen {
  cursor: pointer;
  height: 60px;
  padding: 0 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  &:hover {
    background: rgba(0, 0, 0, 0.04);
    i {
      animation: logoAnimation 0.3s ease-in-out;
    }
  }
}
</style>
